<!--
 * @Author: liaoxing
 * @Date: 2021-11-24 10:10:52
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-01-18 17:16:41
 * @Description: liaoxing created
 * @FilePath: \品新集成管理系统\pin-xin-admin\src\views\task\baseTable.vue
-->
<template>
  <div class="taskIndex flex">
    <aside>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-menu-item index="1">
          <i class="el-icon-s-finance" style="margin: 0 20px 0 10px"></i>
          <span>全部任务</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-s-order" style="margin: 0 20px 0 10px"></i>
          <span>待办任务</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-s-claim" style="margin: 0 20px 0 10px"></i>
          <span>已办任务</span>
        </el-menu-item>
      </el-menu>
    </aside>
    <main>
      <header class="flex-align-center">
        <el-form :inline="true" :model="searchValue" label-width="60px" class="flex-align-center" size="mini">
          <el-form-item label="来源">
            <el-input v-model="searchValue.form" placeholder="来源"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-select v-model="searchValue.title" placeholder="标题">
              <el-option label="一" value="shanghai"></el-option>
              <el-option label="二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button class="absolute" style="right: 16px; top: 26px" type="primary" size="mini" icon="el-icon-plus">新建需求</el-button>
      </header>
      <el-table
        v-loading="loading"
        :data="dataList"
        border
        stripe
        style="width: 100%;"
      >
        <el-table-column type="index" label="序号" :align="'center'" width="50"></el-table-column>
        <el-table-column label="来源" :align="'center'"></el-table-column>
        <el-table-column label="标题" :align="'center'"></el-table-column>
        <el-table-column label="类型" :align="'center'"></el-table-column>
        <el-table-column label="接收时间" :align="'center'"></el-table-column>
        <el-table-column label="结果" :align="'center'"></el-table-column>
        <el-table-column label="期限" :align="'center'"></el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 20px"
        :current-page.sync="pn"
        :page-size="ps"
        layout="total, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </main>
    
  </div>
</template>

<script>
export default {
  name: 'task',
  components: {
  },
  data() {
    return {
      loading: false,
      dataList: [],
      searchValue: {
        form: '',
        titel: ''
      },
      pn: 1,
      ps: 10,
      totalSize: 0
    }
  },
  computed: {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang="less" scoped>
.taskIndex{
  height: calc(100vh - 85px);
  width: 100%;
  box-sizing: border-box;
  // padding: 16px;
  aside{
    width: 200px;
    height: 100%;
    margin: 0;
    padding: 16px 0;
    background-color: unset;
    box-shadow: 0 0 2px 2px gainsboro;
    .el-menu{
      border: unset;
    }
  }
  main{
    flex: 1;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    header{
      height: 60px;
    }
  }
}
</style>